<template>
  <div class="test-container">
    <ImageLoader :src="src" :placeholder="placeholder" :duration="duration" @load="handleLoad" />
  </div>
</template>

<script>
// import ImageLoader from "./components/ImageLoader";
import ImageLoader from "./";

// 测试用图片
import small from "./components/ImageLoader/testImg/small.png";
import big from "./components/ImageLoader/testImg/big.png";

export default {
  components: {
    ImageLoader,
  },
  data() {
    return {
      // src: "https://xxx.png",
      // placeholder: "https://xxx.png",
      src: big,
      placeholder: small,
      duration: 3000,
    };
  },
  methods: {
    handleLoad() {
      console.log("ImageLoader组件事件触发, 图片加载完成");
    },
  },
};
</script>

<style>
.test-container {
  width: 600px;
  height: 400px;
  margin: 200px auto;
  padding: 5px;
  border: 2px solid #333;
}
</style>
